<template>
    <div>
        <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in banner" :key="index">
                    <van-image width="100%" height="100%" fit="fill" :src="item.bannerSrc" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- <van-grid>
            <van-grid-item></van-grid-item>
        </van-grid> -->

        <div class="dataBox" v-if="mp4.length > 0">
            <div class="title">热门MV</div>
            <div class="huan" @click="refresh('mp4')">
                <van-icon name="replay" />
                <span>换一批</span>
            </div>
            <div class="gengduo">
                <span>获取更多</span>
                <van-icon name="arrow" />
            </div>
            <ListDataMV :dataList="mp4" />
        </div>
        <div class="dataBox" v-if="mp3.length > 0">
            <div class="title">热门歌曲</div>
            <div class="huan" @click="refresh('mp3')">
                <van-icon name="replay" />
                <span>换一批</span>
            </div>
            <div class="gengduo">
                <span>获取更多</span>
                <van-icon name="arrow" />
            </div>
            <ListDataMp3 :dataList="mp3" />
        </div>
        <LoadAnimation :load="Load"/>
    </div>
</template>

<script>
import { getSongSort } from '@/api/song'
import { getIndexData } from "@/api/home";
import { Swipe, SwipeItem } from "vant";
export default {
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
    },
    data() {
        return {
            banner: [],
            mp3: [],
            mp4: [],
            mp3page : 1,
            mp4page : 1,
            limit : 8,
            mp4Src : '',
            Load : false
        }
    },
    created() {
        this.getIndexData();
    },
    methods : {
        refresh(type){
            getSongSort({
                page : type == 'mp3' ? ++this.mp3page : ++this.mp4page,
                limit : this.limit,
                type : type
            }).then(res => {
                if(res.code == 200){
                    if(type ==  'mp3'){
                        this.mp3 = res.data
                        if(this.limit > res.data.length){
                            this.mp3page = 1
                        }
                    }else{
                        this.mp4 = res.data
                        if(this.limit > res.data.length){
                            this.mp4page = 1
                        }
                    }
                }
            })
        },
        getIndexData() {
            this.Load = true
            getIndexData().then((res) => {
                this.Load = false
                if(res.code == 200){
                    this.mp3 = res.data.recommendMp3;
                    this.mp4 = res.data.recommendMp4;
                    this.banner = res.data.banners;
                }
            });
        },
    }
}
</script>

<style scoped>
.swipe{
  margin: 0 10px;
  width: calc(100% - 20px);
  border-radius: 20px;
  overflow: hidden;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.dataBox {
  position: relative;
  background: #fff;
  padding: 0 5px;
  margin: 10px 0;
}
.dataBox .title {
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
}
.dataBox .huan{
  position: absolute;
  right: 150px;
  top: 15px;
}
.dataBox .gengduo{
  position: absolute;
  right: 20px;
  top: 15px;
}


</style>